<!DOCTYPE html>
<html>
<head> 
	<title></title>
</head>
<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.big{
				width: 100%;
				height: auto;
			}
			.box{
				width: 60%;
				height: 500px;
				margin: 0 auto;
			}
			.div_left{
				width: 40%;
				height: 100%;
				float: left;
				background: gray;
			}
			.div_left_ul{
				width: 100%;
				height: 100px;
				display: flex;
				flex-flow: row nowrap;
				justify-content: space-between;
				text-align: center;
				margin-top:20px ;
			}
			.div_left_ul li{
				width: 25%;
				height: 100px;
				list-style: none;
			}
			.div_right{
				width: 20%;
				height: 100%;
				background: red;
				float: left;
				list-style: none;
			}
			#but{
				width:100%;
				height: 30px;
				margin-top:20px ;
			}
			span{
				display: inline-block;
				width:50px ;
				height: 20px;
				border: 1px solid #333;
				background: greenyellow;
			}
		</style>
</style>
<body>
	<div class="big">
		<div class="box">
			<div class="div_left">
				<p style="margin-top: 20px;">你喜欢的城市</p>
				<ul id="city">
					<li><span id="bj">北京</span></li>
					<li><span id="sh">上海</span></li>
					<li><span id="se">首尔</span></li>
					<li><span id="hn">河南</span></li>
				</ul>
				<p style="margin-top: 20px;">你喜欢的游戏</p>
				<ul id="android">
					<li><span id="cf">cf</span></li>
					<li><span id="lol">lol</span></li>
					<li><span id="dnf">dnf</span></li>
					<li><span id="qq">qq</span></li>
				</ul>
				<p style="margin-top: 20px;">你喜欢的手机</p>
				<ul id="phone">
					<li><span id="hw">华为</span></li>
					<li><span id="xm">小米</span></li>
					<li><span id="op">oppo</span></li>
					<li><span id="vi">vivo</span></li>
					<input type="radio" name="sex"
					" value="female" id="username" class="girl">女
					<input type="radio" name="sex" value="male" id="gender1" class="boy">男
					<input type="radio" name="other" value="其他性别" id="gender2">其他
				</ul>
				
				
			</div>
			<div class="div_right">
				<li><button id="but1">点击#bj北京节点</button></li>
				<li><button id="but2">查找所有li节点</button>
				</li>
				<li><button id="but3">北京</button>
				</li>
				<li><button id="but4">北京</button>
				</li>
				<li><button id="but5">北京</button>
				</li>
				<li><button id="but6">北京</button>
				</li>
				<li><button id="but7">北京</button>
				</li>
			</div>
		</div>
		</div>
<!-- 


#查找#city下面的所有节点

返回#city下面的所有节点

#phone的第一个子节点

#bj的父节点

返回#android的前一个兄弟节点
读取#username的value值

设置#username的 value属性

返回#bj文本值





 -->
</body>
<script type="text/javascript">
//获取id
	// var bj = document.getElementById("bj");
	// var btn1 = document.getElementById("but1");
//绑定按钮点击事件
// btn1.onclick = function(){
// 	alert(bj.innerText);
// }
//btn2查找对象，绑定事件
 // var btn2 = document.getElementById('but2');
 // var lis = document.getElementsByTagName("li");
 //给按钮绑定 双击 事件
// btn2.ondblclick = function(){
	//查看数组每一项  <——注意
//TagName获取到的结果是个类数组（和数组相似但不是数组，数组的一些特性，可以查看length，可以循环输出）


// for (var i = 0; i < lis.length; i++) {
// 	console.log(lis[i].innerText);
// }
// }
//获取btn3按钮
// var btn3 = document.getElementById("but3");


//获取name
//document.getElementsByName("")
//Node List 节点列表，返回的也是类数组，不是数组，但有数组的特点，length，可以循环输出每一项，由下标等等
//输出标签/元素属性：对象.属性输出对应属性值
//input.value  input.type  input.id
//标签.class获取类名不行 <——注意


// var input = document.getElementsByName("sex");
// btn3.onclick = function(){
// for (var i = 0; i < input.length; i++) {
// 	alert(input.class)
// }
// }



//4.通过ClassName获取元素
//document.getElementsByClassName("类名");
//返回的是数组，将同类名的所有元素以类数组集合的形式返回。类数组有数组一些特性。
//ClassName是ie8及以下版本不兼容
 //document.querySelectorAll(".girl");
//document.querySelector()可以解决ie8以下ClassName不兼容问题
//querySelector("")括号中的引号
//-根据类名查找 querySelector(".类名").类名
//-根据id查找 querySelector(#id名)	 .id名
//querySelector("标签名称") 标签名称   标签名
// -更准确的查找标签名gril的p的标签 
// querySelector("标签名称.类名")确定雷明伟***的标签


//获取子节点
//1.逐级通过获取元素的方式
//document.getElementsById("父").getElementsByTagName("子");
//2.childNodes获取所有子节点（包括回车和空格）
//返回的是类数组
//第一项childNodes[0]
//第二项childNodes[1] ... ...
//3.children 孩子们（只认标签）获取到的是子元素节点，只包括元素，不包括其他文本或空过、回车。
//返回的是类数组。
//4.firstChild （空格、字符、回车、标签）返回标签下面第一个子节点，包括空格回车，标签间的空隙
//5.firstElementChild（值返回标签）返回的是标签下面的第一个子节点（第一个标签）
//6.lastChild（包括空格、回车等）最后一个子元素节点
//lastElementChild最后一个子元素/标签<——注意是标签

//8.parentNode 通过子元素获取父节点
//9.pardetElement
//获取元素上一父节点
//parentElement和parentNode都一样，不同的是parentElement是ie标准
//10.获取下一个兄弟节点（包括回车，空格，文本）
//nextSibling  // 奈克斯特 C博陵
//11.获取下一个兄弟元素（只有标签）
//nextElementSilbling
//用法：弟节点 = 兄节点.nextSibling

//12.获取上一个兄弟节点
//previousSibling//快斯特 C博陵
//上一个兄弟节点
//13.获取上一个兄弟元素
//previousElementSibling



//获取id为box的div
// var box = document.getElementById("box");

//获取btn，给btn绑定事件
// var btn4 = document.getElementById("but4");
// btn4.onclick = function(){
// 	console.log(p1.innerHTML);
// }

// var city = document.getElementById("city");
//1.第一个元素firstElementChild
// var bj = city.firstElementChild;
// console.log(bj);
// var btn4 = document.getElementById("but4");

//#查找#city下面的所有节点
var city = document.getElementById("city");
var child = city.childNodes;
var borth = city.nextSibling;
console.log(child);
console.log(borth);
//返回#city下面的所有节点
// var cityjd = city.
// //#phone的第一个子节点
var phone = document.getElementById("phone");
var pz = phone.firstChild;
console.log(pz);
//#bj的父节点
var bj = document.getElementById("bj");
var bjf = bj.parentNode;
//返回#android的前一个兄弟节点
var and = document.getElementById("android");
var andtext = and.previousSibling;
console.log(andtext);
//读取#username的value值
var username = document.getElementById("username").value;
console.log(username)
//设置#username的 value属性
 username.value = "张爸爸";
 var username = document.getElementById("username").value;
console.log(username);
//返回#bj文本值
var bjtext = bj.innerText;
console.log(bjtext);




	//1.获取元素节点 - 找对象
	// var btn1 = document.getElementById("but1");
	// var city = document.getElementById("div_left_ul")
	// var bj = document.getElementById("bj")
	// var list = document.getElementsByTagName("li");
	// //2.给按钮绑定点击事件 - 搞对象
	// 	btn1.onclick = function(){
	// 		console.log(list);}
	//innerHTML获取/设置（更改）HTML内容
	//获取html内容  元素.innerHTML
//更改html内容  元素.innerHTML="新内容"
// console.log(city.innerHTML = "我要更改它");
//innerText获取/更改html中的文本内容，不包括标签
//获取html文本内容  元素.innerText
//更改html文本内容 元素.innerText = "新内容"
// console.log(city.innerText);
		
//获取元素的方式
//	1.通过id获取元素
//	document.getElementById("id名");
//	2.通过标签名获取元素
//	document.getElementsByTagName("标签名")
//	获取的结果是类数组（和结果像但不是数组）
//3.通过name获取元素
//document.getElementsByName
//4.通过类名过去元素
//document.getElementsByClass
</script>
</html>